<template>
    <div>
        <div slot="tip" class="panel panel-default panel-search">
            <el-form :inline="true" label-width="auto">
                <el-row>
                    <el-form-item label="周期" prop="periodId">
                        <period-select
                            :fnChange="buildDataRanges"
                            ref="periodSelect"
                            v-model="page.query.param.periodId"
                            :clearable="true">

                        </period-select>
                    </el-form-item>

                    <el-form-item label="日期">
                        <el-date-picker
                            style="width: 250px"
                            v-model="dateRange"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy年MM月dd日"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item label="班次" prop="departmentId">
                        <class-master-select style="width:130px" :fnChange="search"
                                             v-model="page.query.param.classMasterId" :clearable="true">
                        </class-master-select>
                    </el-form-item>

                    <el-form-item label="类型" prop="classType">
                        <el-select :clearable="true" v-model="page.query.param.classType" style="width:120px"
                                   @change="search">
                            <el-option v-for="item in $dongxwDict.store.CLASS_TYPES"
                                       :key="item[0]" :value="item[0]" :label="item[1]">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出勤类型">
                        <el-select :clearable="true" v-model="page.query.param.subclassType" style="width:120px">
                            <el-option v-for="item in $dongxwDict.store.SUBCLASS_TYPES"
                                       :key="item[0]" :value="item[0]" :label="item[1]">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="部门" prop="departmentId">
                        <department-select
                            :fnChange="search"
                            v-model="page.query.param.departmentId"
                            :clearable="true"
                        ></department-select>
                    </el-form-item>
                    <el-form-item label="员工" prop="employeeId">
                        <employee-select
                            :fnChange="search"
                            v-model="page.query.param.employeeId"
                            :departmentId="page.query.param.departmentId"
                            :clearable="true">
                        </employee-select>
                        <el-button type="primary" @click="findEmployee" v-keycode="'ENTER'">选择员工
                        </el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" v-keycode="'ENTER'">查询
                        </el-button>
                        <el-button @click="cancel">取消</el-button>

                        <el-button type="primary" plain @click="createMake"><span style="color:red">计算</span>
                        </el-button>
                        <!-- <el-button type="primary" plain @click="create">新增</el-button> -->
                    </el-form-item>
                </el-row>
            </el-form>
        </div>
        <!--<v-toolbar type="alert" style="margin-left:-5px">-->
        <!--&lt;!&ndash;<el-button slot='tip' type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button plain @click="exportRecords">导出 XLS</el-button>&ndash;&gt;-->
        <!--&lt;!&ndash;<el-button type="primary" plain @click="create">新增</el-button>&ndash;&gt;-->
        <!--</v-toolbar>-->
        <div width="50%">
            <!--:click="clickRow"-->
            <v-table
                ref="table"
                :dblclick="edit"
                :page="page"
                :table-minheight="450"
                @dataloaded="onDataloaded">
                <el-table-column
                    prop="abnormalFlag"
                    :sortable="false"
                    label="异常"
                    width="55">
                    <template slot-scope="{ row }">
            <span :style="row.abnormalFlag ? 'color:red' : 'color:black'">              {{
                    row.abnormalFlag ? "是" : "否"
                }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="department"
                    :sortable="true"
                    label="部门"
                    width="120">
                    <template slot-scope="{ row }">
                        <span style="color: black">              {{ row.employee.department.name }}            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="workID" :sortable="true" label="工号" width="100">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.workID || row.employee.id }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" :sortable="true" label="员工" width="100">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.employee.name }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="workday"
                    :sortable="true"
                    label="日期"
                    width="100">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ $dongxwDict.viewDate(row.workday) }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="week" :sortable="true" label="星期" width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.week }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="classType" label="班次类型" width="80">
                    <template slot-scope="{ row }">
                        {{ DICT.CLASSTYPE[row.classType] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="subclassType"
                    :sortable="true"
                    label="出勤类型"
                    width="111"
                >
                    <template slot-scope="{ row }">
                        {{ DICT.SUBCLASSTYPE[row.subclassType] }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="segment"
                    :sortable="true"
                    label="段落"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: blue">
              {{ row.segment }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column prop="rWorkdays" label="出勤工时" width="80">
                    <template slot-scope="{ row }">
            <span :style="row.delayTimes+row.eLeaveTimes+row.absentDays>0?'color: red':'color:black'">
              {{ row.rWorkdays }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="absentDays"
                    label="缺勤工时"
                    width="80">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.absentDays }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="rOvertime"
                    label="实际加班"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rOvertime }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="rHolidays"
                    label="休班工时"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rHolidays }}
            </span>
                    </template>
                </el-table-column>


                <el-table-column prop="rStart" label="实际上班卡" width="90">
                    <template slot-scope="{ row }">
            <span style="color: blue">
              {{ row.rStart }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="rEnd" label="实际下班卡" width="90">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.rEnd }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="sStart"
                    :sortable="true"
                    label="上班卡"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sStart }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="sEnd"
                    :sortable="true"
                    label="下班卡"
                    width="100"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sEnd }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sStartNo" label="上班免卡" width="80">
                    <template slot-scope="{ row }">
            <span :style="row.sStartNo ? 'color:red' : 'color:black'">
              {{ row.sStartNo ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sEndNo" label="下班免卡" width="80">
                    <template slot-scope="{ row }">
            <span :style="row.sEndNo ? 'color:red' : 'color:black'">
              {{ row.sEndNo ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column prop="overDay" label="是否跨天" width="80">
                    <template slot-scope="{ row }">
            <span :style="row.overDay ? 'color:red' : 'color:black'">
              {{ row.overDay ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column prop="sStartB" label="上班卡前分钟" width="111">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sStartB }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sStartA" label="上班卡后分钟" width="111">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sStartA }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column prop="sEndB" label="下班卡前分钟" width="111">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sEndB }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sEndA" label="下班卡后分钟" width="111">
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.sEndA }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="hStandard"
                    :sortable="true"
                    label="标准工时"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.hStandard }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hMinus"
                    :sortable="true"
                    label="扣除工时"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.hMinus }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="includeOvertime"
                    :sortable="true"
                    label="包含加班"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span :style="row.includeOvertime ? 'color:red' : 'color:black'">
              {{ row.includeOvertime ? "是" : "否" }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hOvertime"
                    :sortable="true"
                    label="加班工时"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.hOvertime }}
            </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="noCardTimes"
                    :sortable="true"
                    label="缺卡次数"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.noCardTimes }}
            </span>
                    </template>
                </el-table-column>


                <el-table-column
                    prop="delayTimes"
                    :sortable="true"
                    label="迟到次数"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.delayTimes }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="delayN"
                    :sortable="true"
                    label="迟到分钟"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.delayN }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="eLeaveTimes"
                    :sortable="true"
                    label="早退次数"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.eLeaveTimes }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="eLeaveN"
                    :sortable="true"
                    label="早退分钟"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.eLeaveN }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdAt"
                    :sortable="true"
                    label="创建时间"
                    width="140"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.createdAt }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="username" :sortable="true"
                    label="创建人" width="80">
                    <template slot-scope="{ row }">
                        <span style="color: black">   {{ row.userName }}   </span>
                    </template>
                </el-table-column>

                <el-table-column
                    prop="abnormal"
                    :sortable="true"
                    label="异常"
                    width="80"
                >
                    <template slot-scope="{ row }">
            <span style="color: black">
              {{ row.abnormal }}
            </span>
                    </template>
                </el-table-column>
                <el-table-column width="80" label="操作" :fixed="'right'">
                    <template slot-scope="scope">
                        <el-button type="text" title="编辑" @click="edit(scope.row)">
                            <i class="el-icon-edit"></i>
                        </el-button>
                        <!--        <el-button
                                 type="text"
                                 @click="del(scope.row, scope.$index)"
                                 title="删除"
                               >
                                 <span style="color: red">
                                   <i class="el-icon-delete red"></i
                                 ></span>
                               </el-button> -->
                    </template>
                </el-table-column>
            </v-table>
        </div>
        <v-dialog ref="formDiag" :width="'45%'" title="信息编辑">
            <form-panel @saved="onFormSaved"></form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')"
                >保存
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formDiag.hide();
            }
          "
                >取消
                </el-button
                >
            </div>
        </v-dialog>

        <v-dialog
            ref="formFindDiag"
            :appendToBody="true"
            title="查找"
            :width="'48%'"
        >
            <employee-multi-select
                v-model="page.query.param.employeeId"
                :confirmFind="confirmFind"
                :cancelFind="cancelFind"
            >
                <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
                <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
            </employee-multi-select>
        </v-dialog>

        <v-dialog ref="formMakeDiag" :width="'720px'" title="计算">
            <make-form-panel @saved="onMakeFormSaved"></make-form-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formMakeDiag.dispatch('submit')"
                >计 算
                </el-button
                >
                <el-button
                    type="default"
                    @click="
            () => {
              $refs.formMakeDiag.hide();
              $nextTick(search);
            }
          "
                >关闭
                </el-button
                >
            </div>
        </v-dialog>
    </div>
</template>
<style rel="stylesheet/less" scoped lang="less">
.status_green {
    color: green;
}
</style>

<script>
import DepartmentSelect from "@/components/widgets/hr/DepartmentSelect.vue";
import EmployeeSelect from "@/components/widgets/hr/EmployeeSelect.vue";
import EmployeeMultiSelect from "@/components/widgets/hr/EmployeeMultiSelect.vue";

import PeriodSelect from "@/components/widgets/attend/PeriodSelect.vue";
import ClassMasterSelect from "@/components/widgets/attend/ClassMasterSelect.vue";

import FormPanel from "./Form";
import MakeFormPanel from "./MakeForm";

export default {
    components: {
        EmployeeMultiSelect,
        EmployeeSelect,
        ClassMasterSelect,
        PeriodSelect,
        FormPanel,
        MakeFormPanel,
        DepartmentSelect,
    },
    props: {
        fatherMethodShowSub: {
            type: Function,
            default: null,
        },
    },
    data() {
        return {
            DICT: {
                CLASSTYPE: {
                    10: "10--正常班",
                    20: "20--加班",
                    30: "30--休班",
                },
                SUBCLASSTYPE: {
                    10: "10--正常班",
                    20: "20--加班",
                    21: "21--平时加班",
                    22: "22--周末加班",
                    23: "23--节假日加班",
                    30: "30--出差",
                    31: "31--请假",
                    32: "32--调休",
                    33: "33--休假",
                    34: "34--事假",
                    35: "35--病假",
                },
            },
            dateRange: [],
            formStatus: 1,
            summaryMap: {},

            page: {
                query: {
                    orderBys: "departmentId|asc,employeeId|asc,workday|asc",
                    param: {
                        name: "",
                        periodId: null,
                        period: {},
                        isDeleted: false,
                    },
                },
                getData: this.$api.attend.attend.SegmentService.query,
            },
            tableActions: [
                {
                    name: "编辑",
                    handle: this.edit,
                },
                {
                    name: "删除",
                    handle: this.del,
                    style: "color:red",
                },
            ],
        };
    },
    computed: {},

    methods: {
        findEmployee() {
            this.$refs.formFindDiag.show();
        },

        confirmFind(row) {
            this.$refs.formFindDiag.hide();
            this.page.query.param.employeeId = row.id;
            this.search();
        },
        cancelFind() {
            this.$refs.formFindDiag.hide();
        },

        onDataloaded(rsp) {
        },
        /*
                导出
                 */
        exportRecords() {
            let params = _.cloneDeep(this.getSearchParams());
            params.param.parentId = null;
            this.$api.attend.attend.EmployeeClassService.export(params);
        },

        create() {
            this.$refs.formDiag.show();
        },
        createMake() {
            this.$refs.formMakeDiag.show();
        },
        edit(row) {
            this.$refs.formDiag.show({segmentId: row.segmentId});
        },

        del(row) {
            this.$confirm("确定删除此记录吗?", "提示", {
                type: "warning",
            }).then(() => {
                this.$api.attend.attend.SegmentService.deleteById(row.segmentId).then(
                    (rsp) => {
                        this.search();
                        this.$msgJsonResult(rsp);
                    }
                );
            });
        },

        onMakeFormSaved() {
            this.$refs.formMakeDiag.hide();
            this.$nextTick(this.search);
        },

        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            if (options.segmentId) {
                this.segmentId = options.segmentId;
            }
            this.search();
        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges["workday"] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null,
                };
            }
            return this.page.query;
        },

        buildDataRanges() {
            if (this.page.query.param.periodId != null) {
                this.$api.attend.attend.PeriodService.findById(
                    this.page.query.param.periodId
                ).then((r) => {
                    //console.log(JSON.stringify(r));
                    if (r.data != null) {
                        this.dateRange = [r.data.startDay, r.data.endDay];
                        this.getSearchParams();
                        //  console.log(JSON.stringify(this.page.query));
                        this.$refs.table.load();
                        return;
                    }
                });
            }
        },
        search() {
            this.getSearchParams();
            this.$refs.table.load();
            //this.$refs.tablesub.load();
        },
        cancel() {
            this.dateRange = [];

            this.page.query.param = {
                isDeleted: false,
            };
            this.search();
        },

        clickRow(row) {
            this.row = row;
            // console.log(JSON.stringify(row));
            if (this.fatherMethodShowSub) {
                this.fatherMethodShowSub(row);
            }
        }
    },

    created() {
    },
    mounted() {
        this.$on('init', this.init);
    }
};
</script>
